/* 对页面边框的设置 */
* {
  margin: 0;
  padding: 0;
}
.body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
}
.body {
  min-width: 1200px;
}
#music {
  position: fixed;
  width: 20%;
  height: 5%;
  bottom: 0;
  right: 0%;
  z-index: 999;
}
.body {
  position: relative;
  background-color: black;
}
/* 头部设置 */
.top {
  position: sticky;
  background-color: hsla(0, 0%, 100%, 0.4);
  width: 100%;
  height: 46px;
  top: 0%;
  z-index: 999;
  padding: 4px 0px;
  overflow: hidden;
}
/* 头部搜索栏 */
.top-first {
  position: absolute;
  float: left;
  right: 3%;
  top: 15%;
  overflow: hidden;
  text-align: center;
  border-radius: 0 0 3px #857a7aaf;
}
/* 搜索框 */
.shurukuang {
  width: 200px;
  height: 25px;
}
/* 顶部搜索栏旁边的按钮 */
.sousuoanniu {
  position: relative;
  top: 6.5px;
  width: 25px;
  height: 25px;
  right: 4px;
  background-color: antiquewhite;
  opacity: 0.28;
}
/* 返回图标 */
.back {
  overflow: hidden;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0.5%;
  top: 3%;
  opacity: 0.5;
}
/* 顶部引导栏 */
.menu {
  position: absolute;
  left: 15%;
  width: 60%;
  top: 15%;
  padding: 3px;
  overflow: hidden;
  text-align: center;
}
.yindaolan {
  position: relative;
  background-color: beige;
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 5px;
}
/* 滚动窗口 */
.banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.banner ul {
  position: absolute;
}
.banner ul li {
  height: 100vh;
  float: left;
  background: no-repeat center center;
  background-size: 100%;
  list-style-type: none;
}
/* 底部圆点 */
.banner ol {
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
  border-radius: 10px;
}
.banner ol li {
  width: 10px;
  height: 10px;
  float: left;
  margin: 5px 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  list-style-type: none;
}
.banner ol .current {
  background: rgba(255, 255, 255, 1);
}
.banner i {
  width: 58px;
  height: 120px;
  position: absolute;
  top: 50%;
  margin-top: -60px;
  cursor: pointer;
  border-radius: 5px;
  display: none;
}
/* 两侧按钮 */
.banner .left {
  left: 60px;
  background: url("./picture/left_right.png") no-repeat 0 0px;
}
.banner .right {
  right: 60px;
  background: url("./picture/left_right.png") no-repeat 0px -120px;
}
.banner .left:hover,
.banner .right:hover {
  background-color: rgba(0, 0, 0, 0.31);
}

/*看番去处*/
.first {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(./picture/484b90bde94d01cd59f3c49ce503d50a448bbbdc.png);
  background-size: 100% 100%;
  min-height: 700px;
}
.first-1 {
  position: absolute;
  left: 2%;
  top: 8%;
  width: 40%;
  height: auto;
  overflow: hidden;
  box-shadow: 6px -7px 15px #000000;
  border-radius: 15px;
  transition: 0.5s;
}
.first-1:hover {
  opacity: 0.7;
  box-shadow: 0 0 0 #f0f0f0;
}
.first-2 {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 40%;
  background-color: rgba(4, 220, 248, 0.589);
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 0 20px #161e369a;
  font-size: 1.2rem;
}
.first-3 {
  position: absolute;
  bottom: 5%;
  left: 3%;
  background-color: rgba(0, 0, 0, 0.363);
  border-radius: 8px;
}
.first-4 {
  border-radius: 8px;
  position: absolute;
  bottom: 8%;
  left: 15%;
  width: 150px;
  background-color: rgba(130, 137, 200, 0.452);
  transition: 1s;
}
.first-5 {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 50%;
  height: 25%;
  background-color: rgba(130, 137, 200, 0.452);
  border-radius: 10px;
}
.first-5-1 {
  position: absolute;
  left: 3%;
  top: 2%;
}
.first-5-2 {
  position: absolute;
  overflow: hidden;
  top: 15%;
  width: 90%;
  height: 80%;
  left: 5%;
}
.first-5-2 img {
  width: 100%;
  height: 100%;
}
.mask {
  opacity: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  position: absolute;
  top: 0%;
}
.mask p {
  position: relative;
  top: 40%;
  color: rgba(165, 28, 55, 0.911);
  text-shadow: 2px 0px 1px #182b44;
  font-size: 16px;
}
.first-5-3 {
  position: absolute;
  left: 0;
  width: 40%;
  height: 95%;
  border-radius: 7px;
  overflow: hidden;
}
.first-5-3:hover .mask {
  opacity: 1;
  background-color: rgba(130, 137, 200, 0.452);
}
.first-5-4 {
  position: absolute;
  right: 0;
  width: 40%;
  height: 95%;
  border-radius: 7px;
  overflow: hidden;
}
.first-5-4:hover .mask {
  opacity: 1;
  background-color: rgba(130, 137, 200, 0.452);
}
/* 经典作品 */
.second {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #4277c76b;
  min-height: 700px;
}
.second img {
  width: 100%;
}
.second a {
  text-decoration: none;
  color: black;
}
.second-left {
  position: absolute;
  width: 100%;
  height: 65%;
}
.second-1 {
  position: absolute;
  width: 35%;
  height: auto;
  top: 10%;
  left: 5%;
}
.second-1 img {
  border-radius: 10px;
  box-shadow: 6px -6px 0px #8b8181a6;
  transition: 1s;
}
.second-1 img:hover {
  box-shadow: 0 0 0 #000000;
  opacity: 0.8;
}
.second-2 {
  background-color: #fff;
  position: absolute;
  width: 50%;
  height: 80%;
  right: 0;
  opacity: 0.6;
  border-radius: 15px;
}
.second-2 img {
  height: 80%;
  opacity: 0.8;
  transition: 1s;
}
.second-2-1 {
  position: relative;
  width: 30%;
  left: 5%;
  top: 3%;
  font-size: 0.9rem;
}
.second-2-2 {
  position: absolute;
  right: 5%;
  top: 27%;
}
.second-2-3 {
  position: absolute;
  width: 35%;
  height: 45%;
  top: 45%;
  left: 3%;
  text-align: center;
}
.second-2-4 {
  position: absolute;
  width: 35%;
  height: 45%;
  top: 45%;
  right: 3%;
  text-align: center;
}
.second-2 div:hover img {
  opacity: 1;
}
.second-3 {
  position: relative;
  width: 15%;
  float: right;
  text-align: center;
  background-color: #f0f0f0;
}
.second-menu {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 30px;
  background-color: #6e7c8882;
  z-index: 999;
}
.second-3 li {
  display: none;
  background-color: #75a9d682;
  height: 40px;
  text-align: center;
  top: 5px;
}
.second-3:hover li {
  display: block;
}
.second-bottom {
  position: absolute;
  width: 100%;
  height: 35%;
  bottom: 0%;
  overflow: hidden;
  z-index: 10;
}
.second-bottom img {
  width: 100%;
  height: 100%;
}
.second-bottom div {
  border-radius: 4px;
  overflow: hidden;
}
.second-bottom div:hover {
  opacity: 0.7;
  box-shadow: 0 0 0 #f0f0f0;
}
.second-bottom-1 {
  position: absolute;
  width: 18%;
  height: 85%;
  left: 1%;
  animation-name: div-second-1;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 6px -7px 15px #000000;
  transition: 0.5s;
}
.second-bottom-2 {
  position: absolute;
  width: 18%;
  height: 85%;
  left: 21%;
  animation-name: div-second-2;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 6px -7px 15px #000000;
  transition: 0.5s;
}
.second-bottom-3 {
  position: absolute;
  width: 18%;
  height: 85%;
  left: 41%;
  animation-name: div-second-3;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 6px -7px 15px #000000;
  transition: 0.5s;
}
.second-bottom-4 {
  position: absolute;
  width: 18%;
  height: 85%;
  left: 61%;
  animation-name: div-second-4;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 6px -7px 15px #000000;
  transition: 0.5s;
}
.second-bottom-5 {
  position: absolute;
  width: 18%;
  height: 85%;
  left: 81%;
  animation-name: div-second-5;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 6px -7px 15px #000000;
  transition: 0.5s;
}
/* 国漫精品 */
.thirth {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(./picture/7a440156e0c2b7688a77db6cbdc3078d.jpeg);
  background-size: 100% 100%;
  min-height: 700px;
}
.thirth-1 {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-family: "微软雅黑";
  color: #2c12c0;
  background-color: #f3e8c1;
}
.thirth-2 {
  position: absolute;
  left: 3%;
  top: 10%;
  width: 50%;
  height: 80%;
  text-align: center;
}
.thirth-2 img {
  width: 100%;
  height: 90%;
  border-radius: 8px;
}
.thirth-2-text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 87.5%;
  opacity: 0;
  transition: 1s;
  border-radius:8px; 
  color: #000000;
}
.thirth-2-text p {
  position: absolute;
  width: 80%;
  top: 20%;
  left: 10%;
}
.thirth-2 div:hover .thirth-2-text {
  opacity: 1;
  background-color: #6e68685b;
}
.thirth-2-1 {
  position: absolute;
  top: 10%;
  width: 40%;
  height: auto;
}
.thirth-2-2 {
  position: absolute;
  top: 10%;
  right: 0;
  width: 40%;
  height: auto;
}
.thirth-2-3 {
  position: absolute;
  top: 60%;
  width: 40%;
  height: auto;
}
.thirth-2-4 {
  position: absolute;
  top: 62%;
  right: 0;
  width: 40%;
  height: auto;
}
/* 秦时明月 */
.thirth-3 {
  position: absolute;
  width: 40%;
  height: 45%;
  top: 25%;
  right: 2%;
}
/* 好番推荐 */
.fourth {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
}
.fourth-1 {
  position: absolute;
  width: 50%;
  height: 100%;
  text-align: center;
  background-color: rgba(164, 185, 226, 0.384);
}
.fourth-1 img {
  width: 100%;
  height: 80%;
}
.fourth-1 div {
  color: #000000;
}
.fourth-1 div:hover img {
  transform: scale(1.2, 1.2);
  transition: 1s;
}
.fourth-1-title {
  background-color: rgba(173, 106, 61, 0.753);
  position: absolute;
  width: 100%;
  top: 5%;
  border-radius: 5px;
}
.fourth-1-1 {
  position: absolute;
  width: 25%;
  height: auto;
  left: 5%;
  top: 15%;
}
.fourth-1-2 {
  position: absolute;
  width: 25%;
  height: auto;
  top: 15%;
  left: 37.5%;
}
.fourth-1-3 {
  position: absolute;
  width: 25%;
  height: auto;
  top: 15%;
  right: 5%;
}
.fourth-1-4 {
  position: absolute;
  width: 25%;
  height: auto;
  top: 55%;
  left: 5%;
}
.fourth-1-5 {
  position: absolute;
  width: 25%;
  height: auto;
  top: 55%;
  left: 37.5%;
}
.fourth-1-6 {
  position: absolute;
  width: 25%;
  height: auto;
  top: 55%;
  right: 5%;
}
.fourth-2 {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0%;
  background-color: rgba(255, 255, 255, 0.719);
}
.fourth-2-title {
  position: absolute;
  width: 100%;
  top: 5%;
  background-color: rgba(173, 106, 61, 0.753);
  border-radius: 5px;
}
.fourth-2-form {
  position: absolute;
  top: 0%;
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: 1s;
}
.fourth-2-title:hover .fourth-2-form {
  opacity: 1;
}
.fourth-2-time {
  position: absolute;
  top: 10%;
  width: 100%;
  height: 90%;
}
.fourth-2-time img {
  height: 100%;
  border-radius: 5px;
}
.fourth-2-time p {
  position: absolute;
  top: 30%;
  right: 0%;
  color: #000000;
}
.fourth-2-time-text-1 {
  position: absolute;
  top: 0%;
  left: 20%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-2 {
  position: absolute;
  top: 0%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-3 {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 35%;
  height: 10%;
}

.fourth-2-time-text-4 {
  position: absolute;
  top: 14%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-5 {
  position: absolute;
  top: 28%;
  left: 20%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-6 {
  position: absolute;
  top: 28%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-7 {
  position: absolute;
  top: 42%;
  left: 20%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-8 {
  position: absolute;
  top: 42%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-9 {
  position: absolute;
  top: 56%;
  left: 20%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-10 {
  position: absolute;
  top: 56%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-11 {
  position: absolute;
  top: 70%;
  left: 20%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-12 {
  position: absolute;
  top: 70%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-13 {
  position: absolute;
  top: 84%;
  left: 20%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-text-14 {
  position: absolute;
  top: 84%;
  right: 5%;
  width: 35%;
  height: 10%;
}
.fourth-2-time-1 {
  background: url(./picture/icons.png) no-repeat -255px -930px;
  width: 100%;
  height: 14%;
}
.fourth-2-time-2 {
  background: url(./picture/icons.png) no-repeat -255px -70px;
  width: 100%;
  height: 14%;
}
.fourth-2-time-3 {
  background: url(./picture/icons.png) no-repeat -255px -210px;
  width: 100%;
  height: 14%;
}
.fourth-2-time-4 {
  background: url(./picture/icons.png) no-repeat -255px -350px;
  width: 100%;
  height: 14%;
}
.fourth-2-time-5 {
  background: url(./picture/icons.png) no-repeat -255px -490px;
  width: 100%;
  height: 14%;
}
.fourth-2-time-6 {
  background: url(./picture/icons.png) no-repeat -255px -630px;
  width: 100%;
  height: 14%;
}
.fourth-2-time-7 {
  background: url(./picture/icons.png) no-repeat -255px -770px;
  width: 100%;
  height: 14%;
}
/* 更多内容 */
.fifth {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
  min-height: 700px;
}
.fifth-1 {
  position: absolute;
  width: 45%;
  height: auto;
  left: 3%;
  top: 10%;
  border-radius: 7px;
}
.fifth-1 video {
  width: 100%;
}
.fifth-1-1 {
  position: absolute;
  width: 30%;
  height: auto;
  z-index: 1;
}
.fifth-1-2 {
  position: absolute;
  width: 15%;
  height: auto;
  left: 3%;
  bottom: 5%;
  text-align: center;
  color: #fff;
}
.fifth-2 {
  position: absolute;
  width: 45%;
  height: auto;
  right: 3%;
  top: 10%;
}
.fifth-2 img {
  width: 100%;
}
.fifth-2-1 {
  width: 20%;
  height: auto;
  text-align: center;
}
.fifth-2-2 {
  position: absolute;
  top: 60%;
  width: 20%;
  right: 3%;
}
.fifth-5 {
  position: absolute;
  width: 45%;
  height: 20%;
  bottom: 5%;
  left: 3%;
  background-color: #6269c08f;
  text-align: center;
  text-decoration-color: deeppink;
  border-radius: 10px;
}
.fifth-5 img {
  width: 80%;
  height: 80%;
  border-radius: 10px;
}
.fifth-5-1 {
  position: absolute;
  width: 10%;
  height: 20px;
  left: 3%;
  white-space: nowrap;
}
.fifth-5-2 {
  position: absolute;
  width: 15%;
  height: auto;
  left: 5%;
  top: 25%;
}
.fifth-5-3 {
  position: absolute;
  width: 15%;
  height: auto;
  top: 25%;
  left: 30%;
}
.fifth-5-4 {
  position: absolute;
  width: 15%;
  height: auto;
  top: 25%;
  left: 55%;
}
.fifth-5-5 {
  position: absolute;
  width: 15%;
  height: auto;
  top: 25%;
  left: 80%;
}

/* CSS动画 */

@keyframes div-second-1 {
  0% {
    left: 1%;
  }
  11% {
    left: -18%;
  }
  11.0000001% {
    left: 110%;
  }
  100% {
    left: 1%;
  }
}
@keyframes div-second-2 {
  0% {
    left: 21%;
  }
  31% {
    left: -18%;
  }
  31.0000001% {
    left: 110%;
  }
  100% {
    left: 21%;
  }
}
@keyframes div-second-3 {
  0% {
    left: 41%;
  }
  51% {
    left: -18%;
  }
  51.0000001% {
    left: 110%;
  }
  100% {
    left: 41%;
  }
}
@keyframes div-second-4 {
  0% {
    left: 61%;
  }
  71% {
    left: -18%;
  }
  71.0000001% {
    left: 110%;
  }
  100% {
    left: 61%;
  }
}
@keyframes div-second-5 {
  0% {
    left: 81%;
  }
  91% {
    left: -18%;
  }
  91.0000001% {
    left: 110%;
  }
  100% {
    left: 81%;
  }
}
